<template>
    <div>

        <div class="filter-container">
            <el-input v-model="keyword" placeholder="标题" style="width: 200px;" class="filter-item"></el-input>

            <el-select clearable v-model="listQuery.type" placeholder="类型" style="width: 90px" class="filter-item">
                <el-option v-for="item in calendarTypeOptions"
                           :key="item.key" :label="item.display_name"
                           :value="item.key">
                </el-option>
            </el-select>

            <el-select @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.sort"
                       placeholder="排序">
                <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>

            <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">
                添加
            </el-button>
        </div>

        <el-table :data="list"
                  v-loading="listLoading" border fit
                  highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
            <el-table-column label="序号" type="index" width="65" align="center"></el-table-column>
            <el-table-column label="日期" prop="date" width="180"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="地址" prop="address"></el-table-column>

        </el-table>

        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>

    </div>
</template>

<script>

    import store from '@/store'
    import axios from 'axios'


    const calendarTypeOptions = [
        {key: 'CN', display_name: '中国'},
        {key: 'US', display_name: '美国'},
        {key: 'JP', display_name: '日本'},
        {key: 'EU', display_name: '欧元区'}
    ]

    const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
        acc[cur.key] = cur.display_name;
        return acc
    }, {});

    export default {
        name: 'user',
        store,
        data() {
            return {
                keyword: null,
                list: null,
                currentPage: null,
                listLoading: false,
                listQuery: {
                    type: undefined,
                    sort: '+id'
                },
                calendarTypeOptions,
                sortOptions: [{label: '按ID升序列', key: '+id'}, {label: '按ID降序', key: '-id'}],

            }
        },
        created() {
            this.getList()
            console.log(store.state.count)
            /*axios({
                url:'http://bit.ly/2mTM3nY',
                method: 'get'
            }).then(response => {
                console.log('123')
            }).then(error => {
                console.log(111)
            })*/

        },
        methods: {
            getList() {
                this.list = [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }
                ]
            },
            handleCurrentChange(currentRow, oldCurrentRow) {
                console.log(currentRow)
                console.log(oldCurrentRow)
            },
            handleSizeChange() {

            },
            handleCurrentChange() {

            },
            handleFilter() {

            },
            handleCreate() {

            }

        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>